<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { getStyleName, getChapter, addLevels, selectBook, changeBookHistory } from '@/api/getAxios2.ts'
import Bottom from '@/components/ReadingView/ReadingBottom.vue'
import reading from '@/components/ReadingView/Reading.vue'
import LeftChapter from "@/components/ReadingView/LeftChapter.vue";
import ChapterSetting from '@/components/ReadingView/ChapterSetting.vue';
import { user } from '@/store/storeName'
import Sponsor from '@/components/ReadingView/ChapterSponsor.vue'
import { showToast } from 'vant';
const route = useRoute();
const router = useRouter();
const store = user();
/**
 * 点进来后增加经验值
 * 
 */
if (store.token) {
    addLevels(store.token).then((res: any) => {
        if (res.data !== '登录失效') {
            console.log("经验+50")
            showToast("阅读小说,经验+50")
            store.addLevels(res.data);
        }
    })

}

//本章
const title = ref('')
//toFlag控制有没有出现控制面板
const topFlag = ref(false)
//点击出现控制面板
const fn1 = (e: {
    clientY: any;
    target: any; clientX: number;
}) => {
    let tarRight = window.innerWidth * 4 / 5
    let tarLeft = window.innerWidth * 1 / 5
    if (!(e.clientX >= tarRight) && !(e.clientX <= tarLeft) && !topFlag.value) {
        topFlag.value = true
    } else
        if (topFlag.value && e.clientY < 550 && e.clientY > 50) {
            topFlag.value = false
        }
}

//获取书名(用作标题)
const BookName = ref<any>('')
getStyleName(route.query.id as String).then(res => {
    BookName.value = res.data.data.name
})

/**
 * 左边弹出目录
 */
//获取章节
const chapter = ref<any>([])
//用于获取哪一章，改这个值来弄，应该要放在路由上来,默认值为0
const target = ref<any>(0)
target.value = route.query.target ? route.query.target : 0;
getChapter(route.query.id as String).then(res => {
    res.data.data.chapterList.forEach((item: any) => chapter.value.push(item))
    console.log(chapter.value)
})
/**
 * 控制目录的弹出
 */
const showLeft = ref(false);
const showChapter = () => {
    showLeft.value = true;
    topFlag.value = false
}
/**
 * 跳转到上一章
 */
const preChapter = (flag: any) => {
    if (target.value == 0) {
        console.log("已经是第一章，无法跳转了")
    } else {
        target.value = target.value * 1 - 1 + ''
        router.replace({
            path: "/reading",
            query: {
                id: route.query.id,
                target: target.value,
                flag
            }
        })
        hidden();
    }
}
/**
 * 跳转到下一章
 */
const nextChapter = (a) => {
    // console.log("为什么！！",a)
    target.value = target.value * 1 + 1 + ''
    router.replace({
        path: "/reading",
        query: {
            id: route.query.id,
            target: target.value,

        }
    })
    hidden();
}
/**
 * 隐藏所有的控制面板什么的，直接展示小说
 */
const hidden = () => {
    topFlag.value = false;
    showLeft.value = false;
    showSetting.value = false;
    showSponsor.value = false;
}
/**
 * 记录页数
 * 
 */
const nowPage = ref(1);
const allPages = ref(1);
/**
 * 展示设置
 */
const showSetting = ref(false)
const showSettingAndHidden = () => {
    hidden();
    showSetting.value = true;
}
/**
 * 设置-改变颜色
 */
const backColor = ref('eaeaea')
/**
 * 设置-改变字体大小
 * 现默认1.5rem
 * 
 */
const aboutFont = ref({
    fontSize: 1.5,
    xNum: 15,   //每行多少字
    yNum: 15,   //每列多少字
    maxX: window.innerWidth,
    maxY: window.innerHeight,

})
const jianFont = () => {
    if (aboutFont.value.xNum >= 26) {
        console.log("已经是最小的字体了")
    } else {
        aboutFont.value.xNum += 1
        aboutFont.value.yNum += 1
    }
}
const addFont = () => {
    if (aboutFont.value.xNum <= 10) {
        console.log("已经是最大的字体了")
    } else {
        //最大14×11
        aboutFont.value.xNum -= 1
        aboutFont.value.yNum -= 1
    }
}
/**
 * 打赏
 */
const showSponsor = ref(false)
const sponsor = ()=>{
    hidden();
    showSponsor.value = true;   
}
</script>
<template>
    <div id="box">
        <div class="title" :style="backColor === 'black' ? 'color:white;' : ''">{{ title }}</div>
        <div class="top" :style="topFlag ? 'top: 0;' : 'top: -15vw;'">
            <img src="@/assets/返回白.png" @click="$router.back()" alt="" class="left">
            <div class="center">{{ BookName }}</div>
        </div>
        <div class="bottom" :style="topFlag ? 'bottom: 0;' : 'bottom: -30vw;'">
            <Bottom @showChapter1="showChapter" :chapter="chapter" :target="target" @preChapter="preChapter"
                @nextChapter="nextChapter" :backColor="backColor"
                @changeIsNight="backColor === 'black' ? backColor = 'eaeaea' : backColor = 'black'"
                @showSetting="showSettingAndHidden"
                @sponsor="sponsor"
                ></Bottom>
        </div>
        <div class="sponsor">
            <van-popup v-model:show="showSponsor" position="bottom">
                <Sponsor></Sponsor>
            </van-popup>
        </div>
        <div class="set">
            <van-popup v-model:show="showSetting" position="bottom">
                <!-- 设置 -->
                <ChapterSetting @changeBackColor="backColor = $event" @jianFont="jianFont" @addFont="addFont">
                </ChapterSetting>
            </van-popup>
        </div>
        <div class="leftPopup">
            <!-- 左侧弹出 -->
            <van-popup v-model:show="showLeft" position="left" :style="{ width: '70%', height: '100%' }">
                <LeftChapter :chapter="chapter" @changeTarget="target = $event" :title="title" @goNewChapter="hidden">
                </LeftChapter>
            </van-popup>
        </div>
        <div class="showPages">{{ nowPage }}/{{ allPages }}</div>
        <reading @click="fn1" @changeToFlag="topFlag = false" v-if="chapter.length !== 0" :chapterNum="chapter[target].id"
            @changeTitle="title = $event" :chapter="chapter" @next="nextChapter" @pre="preChapter(1)"
            @changeNowPage="nowPage = $event" @changeAllPages="allPages = $event" :backColor="backColor"
            :aboutFont="aboutFont"></reading>
    </div>
</template>

<style scoped lang='less'>
#box {
    width: 100vw;
    height: 100vh;
    position: fixed;

    .top {
        position: absolute;
        transition: .5s;
        left: 0;
        top: 0;
        width: 100%;
        height: 15vw;
        background-color: black;
        z-index: 99;
        color: white;
        box-sizing: border-box;
        padding: 0 2vw;
        display: flex;
        align-items: center;
        font-family: '微软雅黑';

        .left {
            width: 8vw;
            height: 8vw;
            display: block;
        }

        .center {
            font-size: 1.2rem;
            width: 40vw;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: 21vw;
            text-align: center;
            text-align: center;
        }
    }

    .bottom {
        position: absolute;
        left: 0;
        width: 100%;
        height: 30vw;
        transition: .5s;
        bottom: 0;
        background-color: black;
        color: white;
        z-index: 99;
        padding: 2vw 5vw;
        box-sizing: border-box;
        font-family: '微软雅黑';
    }

    .title {
        position: absolute;
        left: 2rem;
        top: 1vw;
        z-index: 99;
        font-size: .75rem;
        font-family: '微软雅黑';
    }

    .leftPopup {
        font-family: '微软雅黑';



    }

    .showPages {
        position: absolute;
        right: 0vw;
        bottom: 0vw;
        z-index: 30;
        background-color: rgba(0, 0, 0, 0.445);
        padding: .625rem;
        // border-radius: 10px 30px 10px 30px;
        // border-radius: 30px;
        border-radius: 20px 0 0 20px;
        color: rgba(255, 255, 255, 0.532);
    }

    .set,.sponsor {
        .van-overlay {
            background-color: transparent;
        }
    }
}
</style>